<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-container>
      <el-main>
        <el-button type="primary" plain @click="handleAdd">新增用户</el-button>
        <el-scrollbar>
          <el-table :data="userData">
            <el-table-column prop="uid" label="ID" width="120" />
            <el-table-column label="头像" width="120">
              <template v-slot="scope">
                <el-avatar v-if="scope.row.isAdmin === 0" size="large"> user </el-avatar>
                <el-avatar v-if="scope.row.isAdmin === 1" size="large"> admin </el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="120"/>
            <el-table-column prop="password" label="密码" width="120"/>
            <el-table-column prop="nickname" label="昵称" width="140" />
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column  label="操作" width="240">
              <template v-slot="scope">
                <el-button type="primary" plain @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="primary" plain @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
  <!-- 添加或修改影视对话框 -->
  <el-dialog :title="title" :model-value="open" width="550px" style="height: 350px" append-to-body :show-close="false">
    <el-form :model="form"  label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="是否为管理员" prop="phone">
        <el-select v-model="form.isAdmin" placeholder="请选择" style="width: 240px" clearable>
          <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {addUser, delUser, getUserList, updateUser} from "@/api/user.js";
import {ElMessage, ElMessageBox} from "element-plus";

const userData = ref([{
  uid:'',
  username:'',
  password:'',
  nickname:'',
  phone:'',
  isAdmin: 0
}])
const options = [
  {
    value: 1,
    label:'是'
  },
  {
    value: 0,
    label:'否'
  },
]
const open = ref(false)
const title = ref('')
// 表单参数
const form = ref({
  uid:'2',
  username:'',
  password:'',
  nickname:'',
  phone:'',
})
onMounted( () => {
  getList()
})
//表单重置
function resetForm(){
  form.value = {
    uid:null,
    username:null,
    password:null,
    nickname:null,
    phone:null,
    isAdmin:null
  }
}
//新增弹窗
function handleAdd() {
  resetForm();
  open.value = true;
  title.value = "添加影视";
  console.log(form.value.uid)
}
function getList(){
  getUserList().then( (res)=>{
    userData.value = res.data.data
    console.log("userData.value",userData.value)
  })
}
//修改
function handleUpdate(row) {
  resetForm();
  const uid = {uid:row.uid};
  console.log("uid",uid)
  getUserList(uid).then((response) => {
    form.value = response.data.data[0];
    console.log("form.value",form.value)
    console.log("response.data.data",response.data.data)
    open.value = true;
    title.value = "修改影视";
  });
}
//提交表单
function submitForm() {
  if (form.value.uid != null) {
    updateUser(form.value).then((response) => {
      ElMessage.success("修改成功");
      open.value = false;
      getList();
    });
  }else{
    console.log(form.value)
    addUser(form.value).then((response) => {
      ElMessage.success("新增成功");
      open.value = false;
      getList();
    });
  }
}

function handleDelete(row) {
  const uid = row.uid;
  ElMessageBox.alert('是否确认删除影视编号为"' + uid + '"的数据项？').then(() => {
    return delUser(uid);
  }).then(() => {
    getList();
    ElMessage.success("删除成功");
  }).catch(() => {});
}
// 取消按钮
function cancel() {
  open.value = false;
  resetForm();
}
</script>

<style scoped>

</style>

